<template>
  <div class="">
    <div class="flex justify-between min-w-full mb-8">
      <el-carousel ref="headBanner" indicator-position="outside" :class="['w-full']" :autoplay="true" height="33.75rem"
        style="position: relative" @change="bannerImgChange">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image style="width: 100%; height: 100%" :src="item.picture"></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="w-1200-container content-container">
      <div class="main-box">
        <div class="border shadow-md rounded-md">
          <router-select-strip listPropVName="dictLabel" :active-id.sync="queryParams.status"
            :screenList="declareStatus" label="申报状态" @itemClick="handleConfirmYear" />
        </div>
        <ul class="info-list">
          <li v-for="item in infoList" :key="item.id" class="li-box">
            <router-link :to="{ path: '/policyDeclare/policyDetail/' + item.policyId }" class="info-item">
              <div class="main">
                <div class="text-lg font-bold">{{ item.title }}</div>
                <div class="text-sm text-t999">
                  <span> 申报起止时间： </span> <span> {{ item.startTime + '-' + item.endTime }} </span>
                </div>
              </div>
              <div class="w-16 text-right">
                <div class="text-green-500" v-if="calculateTime(item) == 1">进行中</div>
                <div class="text-yellow-500" v-else-if="calculateTime(item) == 2">未开始</div>
                <div class="text-gray-500" v-else-if="calculateTime(item) == 3">已结束</div>
              </div>
            </router-link>
          </li>
        </ul>

        <pagination v-if="tableTotal > 0" :total="tableTotal" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>

      <ul class="aside-box">
        <!-- <li class="aside-item gradient-red" @click="linkTo('/')">
          <div class="full-title">瞪羚独角兽政策</div>
        </li>
        <li class="aside-item gradient-blue">
          <div class="full-title">申报常见问题</div>
        </li>
        <li class="aside-item gradient-green" @click="linkTo('/exam')">
          <div class="full-title">瞪羚自评测</div>
        </li> -->
        <li class="cursor-pointer" @click="linkTo('/')">
          <el-image class="full-title" :src="require('@/assets/images/policy/r-policy.png')" fit="fill"></el-image>
        </li>
        <li class="mt-4 cursor-pointer" @click="linkTo('/exam')">
          <el-image class="full-title" :src="require('@/assets/images/policy/r-policy2.png')" fit="fill"></el-image>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip2.vue'
import { getList } from '@/api/policyDeclare/'
import { getBanner } from "@/api/banner";

export default {
  components: {
    RouterSelectStrip,
  },
  data () {
    return {
            bannerDictLabel: "在线申报",
      bannerDicts: [],
      bannerList: [],
      // bannerList: [
      //   {
      //     picture: require('@/assets/images/declare.jpg'),
      //     redirectUrl: '',
      //     id: 3,
      //   },
      // ],
      declareStatus: [
        { dictValue: 1, dictLabel: '进行中' },
        { dictValue: 2, dictLabel: '未开始' },
        { dictValue: 3, dictLabel: '已结束' },
      ],
      tableTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
        declareState: undefined
      },
      infoList: [],
    }
  },
  computed: {
    // 计算当前时间是否已经超过开始结束时间，用于判断当前的状态
    calculateTime () {
      return (item) => {
        // 如果当前状态为1-下架，则不进行计算
        if (item.status == 1) {
          return
        }

        let nowTime = new Date().getTime()
        let startTime = new Date(item.startTime).getTime()
        let endTime = new Date(item.endTime).getTime()
        if (nowTime >= startTime && nowTime <= endTime) {
          return 1
        } else if (nowTime < startTime) {
          return 2
        } else {
          return 3
        }
      }
    },
  },
  async created(){
        await this.getBannerDicts();
    this.initBannerList();
  },
   mounted () {
    this.getList()

  },
  methods: {
            // 根据字典名称 获取相应的 字典值
    /**
     * @param {Array} dicts 字典列表
     * @param {String} dictLabel 字典名称
     * @returns {String} 返回相应的字典值.若没有相应的值返回  ''  （空字符串）
     */
    getBannerValue(dicts, dictLabel) {
      let findItem = dicts.find((item) => item.dictLabel === dictLabel);
      return findItem && findItem.dictValue ? findItem.dictValue : "";
    },

    // 初始化轮播
    initBannerList() {
      let bannerValue = this.getBannerValue(
        this.bannerDicts,
        this.bannerDictLabel
      );
      getBanner({ type: parseInt(bannerValue) }).then((res) => {
        if (res.code == 200) {
          this.bannerList = res.rows;
        }
      });
    },

    /**
     * @description 获取轮播图字典列表 并赋值给 bannerDicts
     */
    async getBannerDicts() {
      let dictsRes = await this.getDicts("rotation_map");
      if (dictsRes.code === 200) {
        this.bannerDicts = dictsRes.data;
      }
    },

    // 筛选状态
    handleConfirmYear (e) {
      console.log(e)
      this.queryParams.declareState = e.dictValue
      this.getList()
    },
    // 轮播图 handler change
    bannerImgChange (e) {
      this.activeBannerIndex = e
    },
    // 拉取申报列表
    getList () {
      let { status, ...params } = this.queryParams
      getList(params).then((res) => {
        this.infoList = res.rows
      })
    },
    // 跳转
    linkTo (path) {
      this.$router.push({ path })
    },
  },
}
</script>

<style lang="scss" scoped >
/* 修改分页的css使其居中显示 */
::v-deep .pagination-container {
  text-align: center;

  .el-pagination {
    position: unset;
    display: inline-block;
  }
}

.aside-item {
  @apply w-full h-24 rounded-md mb-6 pl-24 transition-all duration-300 cursor-pointer bg-gradient-to-r;

  .full-title {
    @apply text-2xl font-bold tracking-widest w-full h-full flex items-center text-white;
  }
}

.gradient-red {
  @apply from-red-500 to-red-300;
}

.gradient-green {
  @apply from-green-500 to-green-300;
}

.gradient-blue {
  @apply from-blue-500 to-blue-300;
}

.info-list {
  @apply py-6;

  .li-box:not(:last-of-type) {
    .info-item {
      @apply border-dashed border-b;
    }
  }

  .info-item {
    @apply flex p-6 items-stretch;

    .main {
      min-height: 70px;
      @apply flex-1 flex-grow flex flex-col justify-between;
    }

    .aside {
      min-height: 70px;
      min-width: 115px;
      width: 115px;
      height: 100%;
      height: 100%;
      @apply flex flex-col justify-center text-2xl text-t999 pl-6 font-medium border-l border-dashed;
    }
  }
}
</style>
